<template>
	<div class="lbigBox">
		<div class="userNav">
			<div>
				<div class="dealerImg"></div>
				<div>
					<a href="#/home/dealermanage" style="color: #000000;">
						经销商管理
					</a>
				</div>
				<div class="crumbs"></div>
				<div>修改经销商账号</div>
			</div>
		</div>
		<div class="bigBoxbot">
			<div class="information">
				账号资料
			</div>
			<div class="systemAddform">
				<div class="addSide">
					<div><small>*</small>名称：</div>
					<div><input type="text" minlength="2" maxlength="20" placeholder="请输入名称" v-model="name" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系人：</div>
					<div><input type="text" minlength="2" maxlength="15" placeholder="请输入联系人" v-model="linkman" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>
				<div class="addSide">
					<div><small>*</small>联系电话：</div>
					<div><input type="text" minlength="10" maxlength="20" placeholder="请输入联系电话" v-model="telephone" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
					<span style="margin-left: 30px; color: red;font-size: 12px;" v-show="promptel">请输入正确的11位有效手机号</span>
				</div>
				<div class="addSide">
					<div><small>*</small>公司地址：</div>
					<div><input type="text" minlength="2" maxlength="30"  placeholder="请输入公司地址" v-model="Address" @focus="inputFocus" onKeypress="javascript:if(event.keyCode == 32)event.returnValue = false;"></div>
				</div>

			</div>
			<!--提示框-->
			<div id="tipMsg" v-show="istipMsg">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">已编辑的内容未保存，确定进行其他操作？</p>
							<div class="yesNo">
								<input type="button" value="取消" id="yes" @click="abolish">
								<input type="button" value="确定" id="no" @click="confirm">
							</div>
						</div>
					</div>
				</div>
			</div>
			<!--提示框-->
			<div id="tipMsg" v-show="istipMsgA">
				<div class="approval-leave-bg">
					<div class="tipBox">
						<div>
							<p style="color:#fff;font-size: 18px;margin-left: 10px;">提示</p>
						</div>
						<div>
							<p style="padding:40px 0;text-align: center;width:100%;">恭喜，保存成功！</p>
							<div class="yesNo">
								<a href="#/home/dealermanage"><input type="button" value="确定" id="configNew" @click="confirmNewA"></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="systemAddform">
				<div class="systemSave" @click="save" style="margin-top: 60px;">
					<a href="javascript:;">
						保存
					</a>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapActions } from 'vuex'
	export default {
		name: 'user',
		data() {
			return {
				users: [],
				addRemove: false,
				account: "",
				name: "",
				address: "",
				linkman: "",
				telephone: "",
				password: "",
				Address: "",
				istipMsgA: false,
				sideList: [''],
				WistipMsg: false,
				promptel: false,
				istipMsg:false,
				intercept: false,
			}
		},
		filters: {

		},
		 beforeRouteLeave(to, from, next) {
        this.toPath = to.path
        if (this.intercept == false) {
            this.istipMsg = true
        } else if (this.intercept == true) {
            this.istipMsg = false
            next()
         }
        },
		created: function() {
			// 判断用户是否登录
			var userName = sessionStorage.getItem('userName')
			if(!userName) {
				this.WistipMsg = true
			} else {
				// 获取数据
				this.edata = JSON.parse(localStorage.edata)
				this.seedealer({
					id: this.edata.id,
					name: this.edata.name,
					linkman: this.edata.linkman,
					telephone: this.edata.telephone,
					address: this.edata.address
				}).then((data) => {
					this.name = this.edata.name
					this.account = this.edata.account
					this.companyName = this.edata.companyName,
					this.companyAddress = this.edata.companyAddress,
					this.linkman = this.edata.linkman,
					this.telephone = this.edata.telephone,
					this.password = this.edata.password,
					this.Address = this.edata.address,
					this.id = this.edata.id
				})
			}
		},
		methods: {
			//判断登录
			Wconfirm: function() {
				this.WistipMsg = false
				this.$router.push({
					path: '/login'
				})
			},
			abolish: function() {
				this.istipMsg = false
			},
			confirm: function() {
				this.istipMsg = false
				this.intercept = true
				var url = this.toPath
                this.$router.push({
                path: url
            }) 
			},
			inputFocus: function(e) {
				e.srcElement.style.borderColor = '#DDDDDD'
				this.promptel = false
			},
			address: function() {
				this.sideList.push('')
			},
			remove: function(index) {
				this.sideList.splice(index, 1)
			},
			//表单验证
			valior: function() {
				var flag = true
				var errArr = []
				var pattern = /[`~!@#\$%\^\&\*_\+<>\?:"\{\},\.\\\/;'\[\]]/
				var patterna = /^[0-9]{11,11}$/
				var kongge=/\s+/g
				var topArr = [this.name, this.linkman, this.telephone, this.Address].concat(this.sideList)
				for(var i = 0; i < topArr.length; i++) {
					if(!topArr[i] || (topArr[i] === '') || pattern.test(topArr[i])||kongge.test(topArr[i])) {
						errArr.push(i)
					}
				}
				var systemAddformTop = document.getElementsByClassName('systemAddform')[0]
				var inputTop = systemAddformTop.getElementsByTagName('input')
				for(var i = 0; i < inputTop.length; i++) {
					if(errArr.indexOf(i) !== -1) {
						flag = false
						inputTop[i].style.borderColor = 'red'
					}
				}
				if(!patterna.test(this.telephone)) {
					inputTop[2].style.borderColor = 'red'
					this.promptel = true
					flag = false
				}
				return flag
			},
			confirmNewA: function() {
				var self = this
				this.intercept == true
				self.istipMsg = false
				self.istipMsgNew = false
			},
			//修改保存
			save: function() {
				if(!this.valior()) {
					return
				}
				var self = this;
				var afterObj = {
					"address": self.address,
					"id": self.id,
				}
				var beforeObj = {
					"address": self.Address,
				}
				var addArr = [{
					afterObj,
					beforeObj
				}]
				var accountObj = {
					account: self.account,
					name: self.name,
					address: self.address,
					linkman: self.linkman,
					logicDelete: '',
					telephone: self.telephone,
					password: self.password
				}
				var paramJson = {
					"addressList": addArr,
					"account": accountObj
				};
				var paramJson1 = JSON.stringify(paramJson);
				this.dealeramend({
					id: self.id,
					name: self.name,
					linkman: self.linkman,
					telephone: self.telephone,
					address: self.Address
				}).then((data) => {
					        if(data.code == 200) {
					        	this.intercept=true
								  this.$message({
                                  type: 'info',
                                  message: '修改成功!'
                                 })
								  this.$router.push({
                                  path: '/home/dealermanage'
                                }) 
							}else{
								  this.$message({
                                  type: 'info',
                                  message: '服务器异常，请重试!'
                                 })
							}
				})
			},
			...mapActions(['dealeramend', 'seedealer'])
		}
	}
</script>
<style scoped>
	.bigBoxbot{
		width: 100%;		
		background-color: #FFFFFF;
		height: calc(100vh - 90px);
	    overflow-x:hidden ;	   
	    margin-top: 10px;
	}
	.crumbs{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -138px -39px;
	}
input::-ms-clear{display:none;}
input::-ms-reveal{display: none;}
	.lbigBox{
	height: calc(100vh - 90px);
	overflow-x:hidden ;
	overflow-y:hidden ;	
}
	.userNav {
		width: 100%;
		height: 45px;
		border-bottom: 1px solid #ccc;
		box-shadow: 0 3px 3px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #FFFFFF;
	}
	
	.userNav>div:nth-child(1) {
		width: 420px;
		height: 25px;
		display: flex;
		margin-left: 35px;
		align-content: center;
	}
	
	.userNav>div:nth-child(1) img {
		width: 25px;
		height: 25px;
	}
	
	.userNav>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT {
		width: 220px;
		display: flex;
		align-items: center;
	}
	
	.userNavT>div:nth-child(1) {
		display: flex;
	}
	
	.userNavT>div:nth-child(1) img {
		width: 20px;
		height: 20px;
		margin-top: 3px;
	}
	
	.userNavT>div:nth-child(1) div {
		line-height: 25px;
		margin-left: 5px;
		padding: 0;
		color: #333;
		font-size: 14px;
	}
	
	.userNavT>div:nth-child(2) {
		color: #888;
		font-size: 14px;
		cursor: pointer;
	}
	
	.user {
		position: relative;
	}
	
	.information {
		font-size: 14px;
		margin-left: 40px;
		margin-top: 35px;
		color: #999999;
	}
	
	.systemAddform {
		margin-top: -30px;
		margin-left: 300px;
	}
	
	.addSide {
		margin-top: 15px;
		height: 55px;
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.addSide small {
		font-size: 14px;
		color: red;
		margin-right: 5px;
	}
	
	.addSide>div:nth-child(1) {
		width: 150px;
		text-align: right;
		font-size: 14px;
		color: #000;
	}
	
	.addSide input {
		margin-left: 40px;
		width: 350px;
		height: 35px;
		border: 1px solid #DDDDDD;
		border-radius: 5px;
		padding-left: 5px;
		font-size: 14px;
	}
	
	#address {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: .5px solid #43DCE7;
	}
	
	#address a {
		width: 112px;
		height: 32px;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		color: #43DCE7;
	}
	
	#address a:hover {
		text-decoration: none;
	}
	
	#remove {
		margin-left: 20px;
		width: 112px;
		height: 32px;
		border-radius: 5px;
		border: .5px solid #E96565;
	}
	
	.systemSave {
		width: 150px;
		height: 32px;
		background-color: #43DCE7;
		border-radius: 5px;
		margin-top: 30px;
		margin-left: 180px;
	}
	
	.systemSave a {
		display: inline-block;
		width: 150px;
		height: 32px;
		color: #FFFFFF;
		text-align: center;
		line-height: 32px;
	}
	
	#remove a {
		width: 112px;
		height: 32px;
		display: inline-block;
		text-align: center;
		line-height: 32px;
		color: #E96565;
	}
	
	#remove a:hover {
		text-decoration: none;
	}
	
	a {
		text-decoration: none;
	}
	/*弹出框*/
	
	.tipBox {
		width: 560px;
		height: 200px;
		border-radius: 5px;
		box-shadow: 0 7px 12px #5F5F5F;
		position: fixed;
		z-index: 400;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
	}
	
	.tipBox {
		animation: bounce-in .8s;
	}
	
	@keyframes bounce-in {
		0% {
			transform: translateY(-50%);
			opacity: 0;
		}
		100% {
			transform: translateY(0);
			opacity: 1;
		}
	}
	
	.tipBox div:nth-child(1) {
		height: 50px;
		line-height: 50px;
		background: #F49362;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
	}
	
	.tipBox>div:nth-child(2) {
		height: 150px;
		background: #fff;
		border-bottom-left-radius: 5px;
		border-bottom-right-radius: 5px;
	}
	
	.tipBox p {
		margin: 0;
	}
	
	.yesNo input {
		float: right;
		margin-right: 10px;
		overflow: hidden;
	}
	
	.yesNo input {
		width: 80px;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		color: #fff;
	}
	
	.yesNo input:nth-child(2) {
		background: #43dce7;
		margin-right: 20px;
	}
	
	.yesNo input:nth-child(1) {
		background: #999;
	}
	
	.approval-leave-bg {
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		overflow: hidden;
		z-index: 300;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
	}
	
	#configNew {
		background: #43DCE7;
	}
	.dealerImg{
		background: url(../../../static/img/icons.png) no-repeat;
		width: 24px;
		height: 24px;
		background-position: -76px -170px;
	}
</style>